import React, { Component } from 'react';
import { Routes, Link, Route, Navigate } from 'react-router-dom'
import { Breadcrumb, Layout, theme } from 'antd';
import "./index.scss"
import Menu from "../menu"
import sub1 from '../menList/sub1';
import sub2 from '../menList/sub2';

const { Content, Footer, Sider, Header } = Layout;

/* 路由 */
const router = [
	{
		path: "/sub1-sub1",
		element: sub1
	},
	{
		path: "/sub2-sub1",
		element: sub2
	},
]

class Home extends Component {
	render() {
		return (
			<Layout className="layout-page" id="layout-page">
				<Sider
					className="layout-sider"
					width={250}
					breakpoint="lg"
					collapsedWidth="0"
				>
					<div className="logo" />
					<Menu />
				</Sider>
				<Layout className="layout-main-page">
					<Header className="layout-header" />
					<div className="demo-box">
						<Content className="demo-page" >
							<Routes>
								{router.map((item, index) => {
									return <Route path={item.path} element={<item.element />} key={index}></Route>
								})}
							</Routes>
						</Content>
						<Footer style={{ textAlign: 'center', background: "transparent", fontWeight: "bold" }}>基于antdUI+react搭建的后台模板</Footer>
					</div>
				</Layout>
			</Layout>
		);
	}
}

export default Home;